```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP协议详解 - 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .code-block {
            background-color: #f6f8fa;
            border-radius: 6px;
            padding: 16px;
            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .header-anchor {
            color: #4f46e5;
            text-decoration: none;
            margin-right: 8px;
        }
        .header-anchor:hover {
            color: #6366f1;
        }
        .diagram-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">HTTP协议完全指南</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">探索现代Web通信的基础协议</p>
            <div class="flex justify-center space-x-4">
                <a href="#what-is-http" class="px-6 py-3 bg-white text-indigo-600 font-semibold rounded-lg hover:bg-gray-100 transition duration-300">
                    <i class="fas fa-book-open mr-2"></i>开始阅读
                </a>
                <a href="#visualization" class="px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300">
                    <i class="fas fa-project-diagram mr-2"></i>可视化图表
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 md:px-0 py-12">
        <!-- Table of Contents -->
        <div class="bg-white rounded-xl shadow-md p-6 mb-12 card">
            <h2 class="text-2xl font-bold mb-4 text-indigo-700">
                <i class="fas fa-list-ul mr-2"></i>内容目录
            </h2>
            <ul class="space-y-2">
                <li><a href="#what-is-http" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>什么是HTTP协议</a></li>
                <li><a href="#web-browser-server" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>Web服务器、浏览器、代理服务器</a></li>
                <li><a href="#url-details" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>URL详解</a></li>
                <li><a href="#stateless" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>HTTP协议的无状态性</a></li>
                <li><a href="#multiple-requests" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>打开网页的多次请求</a></li>
                <li><a href="#message-structure" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>HTTP消息结构</a></li>
                <li><a href="#get-vs-post" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>GET和POST方法区别</a></li>
                <li><a href="#status-codes" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>HTTP状态码</a></li>
                <li><a href="#request-headers" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>HTTP请求头</a></li>
                <li><a href="#response-headers" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>HTTP响应头</a></li>
                <li><a href="#keep-alive" class="text-indigo-600 hover:text-indigo-800 transition duration-200"><i class="fas fa-chevron-right mr-2 text-sm"></i>无状态与Keep-Alive</a></li>
            </ul>
        </div>

        <!-- Visualization Section -->
        <div id="visualization" class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                <i class="fas fa-project-diagram mr-3"></i>HTTP协议可视化
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- HTTP Request Flow -->
                <div class="bg-white rounded-xl shadow-md p-6 card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">
                        <i class="fas fa-exchange-alt mr-2"></i>HTTP请求流程
                    </h3>
                    <div class="diagram-container">
                        <div class="mermaid">
                            sequenceDiagram
                                participant 浏览器
                                participant 代理服务器
                                participant Web服务器
                                浏览器->>代理服务器: HTTP请求(Request)
                                代理服务器->>Web服务器: 转发请求
                                Web服务器->>代理服务器: HTTP响应(Response)
                                代理服务器->>浏览器: 转发响应
                        </div>
                    </div>
                    <p class="mt-4 text-gray-600">浏览器通过HTTP协议与Web服务器通信，可能经过代理服务器中转</p>
                </div>
                
                <!-- HTTP Message Structure -->
                <div class="bg-white rounded-xl shadow-md p-6 card">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">
                        <i class="fas fa-envelope-open-text mr-2"></i>HTTP消息结构
                    </h3>
                    <div class="diagram-container">
                        <div class="mermaid">
                            classDiagram
                                class HTTPRequest {
                                    +请求行(Method Path Version)
                                    +请求头(Headers)
                                    +空行
                                    +请求体(Body)
                                }
                                class HTTPResponse {
                                    +状态行(Version Status Message)
                                    +响应头(Headers)
                                    +空行
                                    +响应体(Body)
                                }
                        </div>
                    </div>
                    <p class="mt-4 text-gray-600">HTTP请求和响应具有类似的结构，都包含起始行、头部和可选的主体</p>
                </div>
            </div>
        </div>

        <!-- Content Sections -->
        <article class="prose prose-indigo max-w-none">
            <!-- What is HTTP -->
            <section id="what-is-http" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#what-is-http" class="header-anchor"><i class="fas fa-link"></i></a>
                    什么是HTTP协议
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="text-lg">协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。</p>
                    <p class="mt-4 font-medium text-indigo-600">目前我们使用的是HTTP/1.1版本</p>
                </div>
            </section>

            <!-- Web Browser and Server -->
            <section id="web-browser-server" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#web-browser-server" class="header-anchor"><i class="fas fa-link"></i></a>
                    Web服务器，浏览器,代理服务器
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="mb-4">当我们打开浏览器，在地址栏中输入URL，然后我们就看到了网页。原理是怎样的呢？</p>
                    <p class="mb-6">实际上我们输入URL后，我们的浏览器给Web服务器发送了一个Request, Web服务器接到Request后进行处理，生成相应的Response，然后发送给浏览器，浏览器解析Response中的HTML,这样我们就看到了网页。</p>
                    
                    <div class="bg-gray-100 p-4 rounded-lg mb-6">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245087581-2aa9ebdc-89da-4500-8d67-8b29a48b998a.png" alt="浏览器与服务器通信流程" class="rounded-lg shadow-sm w-full">
                    </div>
                    
                    <p class="mb-4">我们的Request有可能是经过了代理服务器，最后才到达Web服务器的。</p>
                    
                    <div class="bg-gray-100 p-4 rounded-lg mb-4">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245099729-8d1b14e7-408d-4cdd-8718-354d4b75b578.png" alt="代理服务器通信流程" class="rounded-lg shadow-sm w-full">
                    </div>
                    
                    <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">代理服务器的功能：</h3>
                    <ul class="list-disc pl-6 space-y-2">
                        <li><span class="font-medium">提高访问速度：</span>大多数的代理服务器都有缓存功能。</li>
                        <li><span class="font-medium">突破限制：</span>也就是翻墙了。</li>
                        <li><span class="font-medium">隐藏身份。</span></li>
                    </ul>
                </div>
            </section>

            <!-- URL Details -->
            <section id="url-details" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#url-details" class="header-anchor"><i class="fas fa-link"></i></a>
                    URL详解
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="mb-4">URL(Uniform Resource Locator) 地址用于描述一个网络上的资源, 基本格式如下：</p>
                    <div class="code-block mb-6">
                        <code>schema://host[:port#]/path/.../[?query-string][#anchor]</code>
                    </div>
                    <ul class="list-disc pl-6 space-y-2 mb-6">
                        <li><span class="font-medium">scheme：</span>指定低层使用的协议(例如：http, https, ftp)</li>
                        <li><span class="font-medium">host：</span>HTTP服务器的IP地址或者域名</li>
                        <li><span class="font-medium">port#：</span>HTTP服务器的默认端口是80，这种情况下端口号可以省略。如果使用了别的端口，必须指明，例如 http://www.cnblogs.com:8080/</li>
                        <li><span class="font-medium">path：</span>访问资源的路径</li>
                        <li><span class="font-medium">query-string：</span>发送给http服务器的数据</li>
                        <li><span class="font-medium">anchor：</span>锚</li>
                    </ul>
                    
                    <p class="mb-2">URL 的一个例子：</p>
                    <div class="code-block mb-4">
                        <code>http://www.mywebsite.com/sj/test/test.aspx?name=sviergn&x=true#stuff</code>
                    </div>
                    
                    <div class="bg-indigo-50 p-4 rounded-lg">
                        <ul class="list-none space-y-1">
                            <li><span class="font-medium">Schema:</span> http</li>
                            <li><span class="font-medium">host:</span> www.mywebsite.com</li>
                            <li><span class="font-medium">path:</span> /sj/test/test.aspx</li>
                            <li><span class="font-medium">Query String:</span> name=sviergn&x=true</li>
                            <li><span class="font-medium">Anchor:</span> stuff</li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- Stateless Protocol -->
            <section id="stateless" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#stateless" class="header-anchor"><i class="fas fa-link"></i></a>
                    HTTP协议是无状态的
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p>http协议是无状态的，同一个客户端的这次请求和上次请求是没有对应关系，对http服务器来说，它并不知道这两个请求来自同一个客户端。为了解决这个问题， Web程序引入了Cookie机制来维护状态。</p>
                </div>
            </section>

            <!-- Multiple Requests -->
            <section id="multiple-requests" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#multiple-requests" class="header-anchor"><i class="fas fa-link"></i></a>
                    打开一个网页需要浏览器发送很多次Request
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <ol class="list-decimal pl-6 space-y-3">
                        <li>当你在浏览器输入URL http://www.cnblogs.com 的时候，浏览器发送一个Request去获取 http://www.cnblogs.com 的html. 服务器把Response发送回给浏览器.</li>
                        <li>浏览器分析Response中的 HTML，发现其中引用了很多其他文件，比如图片，CSS文件，JS文件。</li>
                        <li>浏览器会自动再次发送Request去获取图片，CSS文件，或者JS文件。</li>
                        <li>等所有的文件都下载成功后。网页就被显示出来了。</li>
                    </ol>
                </div>
            </section>

            <!-- Message Structure -->
            <section id="message-structure" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#message-structure" class="header-anchor"><i class="fas fa-link"></i></a>
                    HTTP消息的结构
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="mb-4">先看Request消息的结构，Request消息分为3部分，第一部分叫Request line, 第二部分叫Request header, 第三部分是body. header和body之间有个空行。</p>
                    
                    <div class="bg-gray-100 p-4 rounded-lg mb-6">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245143719-ac5e1c85-4db8-480b-9b1d-cb06fa14c909.png" alt="HTTP请求结构" class="rounded-lg shadow-sm w-full">
                    </div>
                    
                    <p class="mb-4">第一行中的Method表示请求方法,比如"POST","GET", Path-to-resoure表示请求的资源， Http/version-number 表示HTTP协议的版本号。</p>
                    <p class="mb-6">当使用的是"GET" 方法的时候， body是为空的。</p>
                    
                    <p class="mb-2">比如我们打开博客园首页的request如下：</p>
                    <div class="code-block mb-6">
                        <code>GET http://www.cnblogs.com/ HTTP/1.1
Host: www.cnblogs.com</code>
                    </div>
                    
                    <p class="mb-4">抽象的东西，难以理解，老感觉是虚的，所谓眼见为实, 实际见到的东西，我们才能理解和记忆。我们今天用Fiddler，实际的看看Request和Response.</p>
                    <p class="mb-6">下面我们打开Fiddler捕捉一个博客园登录的Request然后分析下它的结构,在Inspectors tab下以Raw的方式可以看到完整的Request的消息。</p>
                    
                    <div class="bg-gray-100 p-4 rounded-lg mb-6">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245168379-21487c58-7a8d-4ea5-b757-3d21a0ffd227.png" alt="Fiddler捕获的HTTP请求" class="rounded-lg shadow-sm w-full">
                    </div>
                    
                    <p class="mb-4">我们再看Response消息的结构, 和Request消息的结构基本一样。同样也分为三部分,第一部分叫Response line, 第二部分叫Response header，第三部分是body. header和body之间也有个空行。</p>
                    
                    <div class="bg-gray-100 p-4 rounded-lg mb-6">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245189225-dce62e8f-1f6b-4232-9d1a-05e1015e9488.png" alt="HTTP响应结构" class="rounded-lg shadow-sm w-full">
                    </div>
                    
                    <p class="mb-4">HTTP/version-number表示HTTP协议的版本号，status-code和message请看下节状态代码的详细解释.</p>
                    <p class="mb-4">我们用Fiddler捕捉一个博客园首页的Response然后分析下它的结构,在Inspectors tab下以Raw的方式可以看到完整的Response的消息。</p>
                    
                    <div class="bg-gray-100 p-4 rounded-lg">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245207840-745d4630-937e-4308-a21f-b603b9737969.png" alt="Fiddler捕获的HTTP响应" class="rounded-lg shadow-sm w-full">
                    </div>
                </div>
            </section>

            <!-- GET vs POST -->
            <section id="get-vs-post" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#get-vs-post" class="header-anchor"><i class="fas fa-link"></i></a>
                    Get和Post方法的区别
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="mb-4">Http协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作。我们最常见的就是GET和POST了。<span class="text-red-600 font-medium">GET一般用于获取/查询资源信息，而POST一般用于更新资源信息.</span></p>
                    
                    <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">GET和POST的区别：</h3>
                    <ol class="list-decimal pl-6 space-y-3">
                        <li>GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.</li>
                        <li>GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制.</li>
                        <li>GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值。</li>
                        <li>GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.</li>
                    </ol>
                </div>
            </section>

            <!-- Status Codes -->
            <section id="status-codes" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#status-codes" class="header-anchor"><i class="fas fa-link"></i></a>
                    状态码
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="mb-4">Response消息中的第一行叫做状态行，由HTTP协议版本号，状态码，状态消息三部分组成。</p>
                    <p class="mb-6">状态码用来告诉HTTP客户端,HTTP服务器是否产生了预期的Response.</p>
                    
                    <p class="mb-4">HTTP/1.1中定义了5类状态码，状态码由三位数字组成，第一个数字定义了响应的类别：</p>
                    <div class="bg-gray-100 p-4 rounded-lg mb-6">
                        <ul class="list-none space-y-2">
                            <li><span class="font-medium">1XX 提示信息</span> - 表示请求已被成功接收，继续处理</li>
                            <li><span class="font-medium">2XX 成功</span> - 表示请求已被成功接收，理解，接受</li>
                            <li><span class="font-medium">3XX 重定向</span> - 要完成请求必须进行更进一步的处理</li>
                            <li><span class="font-medium">4XX 客户端错误</span> - 请求有语法错误或请求无法实现</li>
                            <li><span class="font-medium">5XX 服务器端错误</span> - 服务器未能实现合法的请求</li>
                        </ul>
                    </div>
                    
                    <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">常见状态码：</h3>
                    
                    <div class="space-y-6">
                        <div>
                            <h4 class="font-semibold text-lg mb-2">200 OK</h4>
                            <p class="mb-2">最常见的就是成功响应状态码200了，这表明该请求被成功地完成，所请求的资源发送回客户端。</p>
                            <div class="bg-gray-100 p-4 rounded-lg">
                                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245228857-3e005c76-292f-419e-8b19-e29237b80cd0.png" alt="200状态码示例" class="rounded-lg shadow-sm w-full">
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-2">302 Found</h4>
                            <p class="mb-2">重定向，新的URL会在response中的Location中返回，浏览器将会自动使用新的URL发出新的Request。</p>
                            <div class="bg-gray-100 p-4 rounded-lg">
                                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245242566-028e6356-7414-4d8b-9717-d0b5e30b2a37.png" alt="302状态码示例" class="rounded-lg shadow-sm w-full">
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-2">304 Not Modified</h4>
                            <p class="mb-2">代表上次的文档已经被缓存了，还可以继续使用。</p>
                            <div class="bg-gray-100 p-4 rounded-lg mb-2">
                                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245254016-b9e203d8-e245-46b3-ae7a-52a44b64363f.png" alt="304状态码示例" class="rounded-lg shadow-sm w-full">
                            </div>
                            <p class="text-sm text-gray-600">提示：如果你不想使用本地缓存可以用Ctrl+F5强制刷新页面</p>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-2">400 Bad Request</h4>
                            <p>客户端请求与语法错误，不能被服务器所理解</p>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-2">403 Forbidden</h4>
                            <p>服务器收到请求，但是拒绝提供服务</p>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-2">404 Not Found</h4>
                            <p class="mb-2">请求资源不存在（输错了URL）</p>
                            <div class="bg-gray-100 p-4 rounded-lg">
                                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245264772-693384e3-a189-4d5c-ac50-d1820115a263.png" alt="404状态码示例" class="rounded-lg shadow-sm w-full">
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-2">500 Internal Server Error</h4>
                            <p>服务器发生了不可预期的错误</p>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-2">503 Server Unavailable</h4>
                            <p>服务器当前不能处理客户端的请求，一段时间后可能恢复正常</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Request Headers -->
            <section id="request-headers" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#request-headers" class="header-anchor"><i class="fas fa-link"></i></a>
                    HTTP Request header
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="mb-4">使用Fiddler能很方便的查看Reques header,点击Inspectors tab ->Request tab-> headers。</p>
                    
                    <div class="bg-gray-100 p-4 rounded-lg mb-6">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245281253-2d6b84fa-f085-4eef-becc-87255fa7b859.png" alt="HTTP请求头" class="rounded-lg shadow-sm w-full">
                    </div>
                    
                    <p class="mb-6">header有很多，比较难以记忆，我们也按照Fiddler那样把header进行分类，这样比较清晰也容易记忆。</p>
                    
                    <div class="space-y-8">
                        <div>
                            <h3 class="text-xl font-semibold mb-3 text-indigo-600">Cache 头域</h3>
                            
                            <h4 class="font-medium mb-2">If-Modified-Since</h4>
                            <p class="mb-4">作用：把浏览器端缓存页面的最后修改时间发送到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。如果时间一致，那么返回304，客户端就直接使用本地缓存文件。如果时间不一致，就会返回200和新的文件内容。客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示在浏览器中.</p>
                            <p class="code-block mb-4"><code>If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT</code></p>
                            <div class="bg-gray-100 p-4 rounded-lg">
                                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245304304-11b5d851-4d15-4c64-bbed-aa1513d7b67e.png" alt="If-Modified-Since示例" class="rounded-lg shadow-sm w-full">
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">If-None-Match</h4>
                            <p class="mb-4">作用: If-None-Match和ETag一起工作，工作原理是在HTTP Response中添加ETag信息。当用户再次请求该资源时，将在HTTP Request中加入If-None-Match信息(ETag的值)。如果服务器验证资源的ETag没有改变（该资源没有更新），将返回一个304状态告诉客户端使用本地缓存文件。否则将返回200状态和新的资源和Etag.使用这样的机制将提高网站的性能。</p>
                            <p class="code-block mb-4"><code>If-None-Match: "03f2b33c0bfcc1:0"</code></p>
                            <div class="bg-gray-100 p-4 rounded-lg">
                                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245318426-aeab5946-c81f-4434-98c4-9870d4c92b5a.png" alt="If-None-Match示例" class="rounded-lg shadow-sm w-full">
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Pragma</h4>
                            <p class="mb-2">作用：防止页面被缓存，在HTTP/1.1版本中，它和Cache-Control:no-cache作用一模一样</p>
                            <p class="code-block mb-2"><code>Pragma: no-cache</code></p>
                            <p class="text-red-600 font-medium">注意: 在HTTP/1.0版本中，只实现了Pragema:no-cache, 没有实现Cache-Control</p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Cache-Control</h4>
                            <p class="mb-2">作用: 这个是非常重要的规则。这个用来指定Response-Request遵循的缓存机制。各个指令含义如下</p>
                            <ul class="list-disc pl-6 space-y-1">
                                <li><code>Cache-Control:Public</code> - 可以被任何缓存所缓存</li>
                                <li><code>Cache-Control:Private</code> - 内容只缓存到私有缓存中</li>
                                <li><code>Cache-Control:no-cache</code> - 所有内容都不会被缓存</li>
                            </ul>
                            <p class="mt-2 text-sm text-gray-600">还有其他的一些用法，我没搞懂其中的意思，请大家参考其他的资料</p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Client 头域</h3>
                            
                            <h4 class="font-medium mb-2">Accept</h4>
                            <p class="mb-2">作用：浏览器端可以接受的媒体类型。</p>
                            <p class="mb-2">例如：<code>Accept: text/html</code>代表浏览器可以接受服务器回发的类型为text/html也就是我们常说的html文档。</p>
                            <p class="mb-2">如果服务器无法返回text/html类型的数据,服务器应该返回一个406错误(non acceptable)</p>
                            <p>通配符 * 代表任意类型</p>
                            <p class="code-block mt-2"><code>Accept: */*</code>代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)</p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Accept-Encoding：</h4>
                            <p class="mb-2">作用：浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate），（注意：这不是只字符编码）；</p>
                            <p class="code-block"><code>Accept-Encoding: gzip, deflate</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Accept-Language</h4>
                            <p class="mb-2">作用：浏览器申明自己接收的语言。</p>
                            <p class="mb-2">语言跟字符集的区别：中文是语言，中文有多种字符集，比如big5，gb2312，gbk等等；</p>
                            <p class="code-block"><code>Accept-Language: en-us</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">User-Agent</h4>
                            <p class="mb-2">作用：告诉HTTP服务器，客户端使用的操作系统和浏览器的名称和版本.</p>
                            <p class="mb-2">我们上网登陆论坛的时候，往往会看到一些欢迎信息，其中列出了你的操作系统的名称和版本，你所使用的浏览器的名称和版本，这往往让很多人感到很神奇，实际上，服务器应用程序就是从User-Agent这个请求报头域中获取到这些信息User-Agent请求报头域允许客户端将它的操作系统、浏览器和其它属性告诉服务器。</p>
                            <p class="code-block"><code>User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Accept-Charset</h4>
                            <p>作用：浏览器申明自己接收的字符集，这就是本文前面介绍的各种字符集和字符编码，如gb2312，utf-8（通常我们说Charset包括了相应的字符编码方案）；</p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Cookie/Login 头域</h3>
                            
                            <h4 class="font-medium mb-2">Cookie:</h4>
                            <p>作用：最重要的header,将cookie的值发送给HTTP服务器</p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Entity头域</h3>
                            
                            <h4 class="font-medium mb-2">Content-Length</h4>
                            <p class="mb-2">作用：发送给HTTP服务器数据的长度。</p>
                            <p class="code-block"><code>Content-Length: 38</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Content-Type</h4>
                            <p class="code-block"><code>Content-Type: application/x-www-form-urlencoded</code></p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Miscellaneous 头域</h3>
                            
                            <h4 class="font-medium mb-2">Referer:</h4>
                            <p class="mb-2">作用：提供了Request的上下文信息的服务器，告诉服务器我是从哪个链接过来的，比如从我主页上链接到一个朋友那里，他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。</p>
                            <p class="code-block"><code>Referer:http://translate.google.cn/?hl=zh-cn&tab=wT</code></p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Transport 头域</h3>
                            
                            <h4 class="font-medium mb-2">Connection</h4>
                            <p class="mb-2">例如：<code>Connection: keep-alive</code>当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接</p>
                            <p>例如：<code>Connection: close</code>代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭，当客户端再次发送Request，需要重新建立TCP连接。</p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Host（发送请求时，该报头域是必需的）</h4>
                            <p class="mb-2">作用: 请求报头域主要用于指定被请求资源的Internet主机和端口号，它通常从HTTP URL中提取出来的</p>
                            <p class="mb-2">例如: 我们在浏览器中输入：http://www.guet.edu.cn/index.html</p>
                            <p class="mb-2">浏览器发送的请求消息中，就会包含Host请求报头域，如下：</p>
                            <p class="code-block"><code>Host：http://www.guet.edu.cn</code></p>
                            <p>此处使用缺省端口号80，若指定了端口号，则变成：Host：指定端口号</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Response Headers -->
            <section id="response-headers" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#response-headers" class="header-anchor"><i class="fas fa-link"></i></a>
                    HTTP Response header
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="mb-4">同样使用Fiddler查看Response header,点击Inspectors tab ->Response tab-> headers。</p>
                    
                    <div class="bg-gray-100 p-4 rounded-lg mb-6">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245336484-9a83148c-dc22-4eea-a4ad-efd9a8aad52f.png" alt="HTTP响应头" class="rounded-lg shadow-sm w-full">
                    </div>
                    
                    <p class="mb-6">我们也按照Fiddler那样把header进行分类，这样比较清晰也容易记忆。</p>
                    
                    <div class="space-y-8">
                        <div>
                            <h3 class="text-xl font-semibold mb-3 text-indigo-600">Cache头域</h3>
                            
                            <h4 class="font-medium mb-2">Date</h4>
                            <p class="mb-2">作用:生成消息的具体时间和日期</p>
                            <p class="code-block"><code>Date: Sat, 11 Feb 2012 11:35:14 GMT</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Expires</h4>
                            <p class="mb-2">作用:浏览器会在指定过期时间内使用本地缓存</p>
                            <p class="code-block"><code>Expires: Tue, 08 Feb 2022 11:35:14 GMT</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Vary</h4>
                            <p class="code-block"><code>Vary: Accept-Encoding</code></p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Cookie/Login 头域</h3>
                            
                            <h4 class="font-medium mb-2">P3P</h4>
                            <p class="mb-2">作用:用于跨域设置Cookie,这样可以解决iframe跨域访问cookie的问题</p>
                            <p class="code-block"><code>P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Set-Cookie</h4>
                            <p class="mb-2">作用：非常重要的header,用于把cookie发送到客户端浏览器，每一个写入cookie都会生成一个Set-Cookie.</p>
                            <p class="code-block mb-4"><code>Set-Cookie: sc=4c31523a; path=/; domain=.acookie.taobao.com</code></p>
                            <div class="bg-gray-100 p-4 rounded-lg">
                                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692245356277-a8931988-5fcc-4881-8881-7abc40e573da.png" alt="Set-Cookie示例" class="rounded-lg shadow-sm w-full">
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Entity头域</h3>
                            
                            <h4 class="font-medium mb-2">ETag</h4>
                            <p class="mb-2">作用:和If-None-Match配合使用。（实例请看上节中If-None-Match的实例）</p>
                            <p class="code-block"><code>ETag: "03f2b33c0bfcc1:0"</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Last-Modified:</h4>
                            <p class="mb-2">作用：用于指示资源的最后修改日期和时间。（实例请看上节的If-Modified-Since的实例）</p>
                            <p class="code-block"><code>Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Content-Type</h4>
                            <p class="mb-2">作用：WEB服务器告诉浏览器自己响应的对象的类型和字符集。</p>
                            <div class="space-y-2">
                                <p class="code-block"><code>Content-Type: text/html; charset=utf-8</code></p>
                                <p class="code-block"><code>Content-Type:text/html;charset=GB2312</code></p>
                                <p class="code-block"><code>Content-Type: image/jpeg</code></p>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Content-Length</h4>
                            <p class="mb-2">指明实体正文的长度，以字节方式存储的十进制数字来表示。在数据下行的过程中，Content-Length的方式要预先在服务器中缓存所有数据，然后所有数据再一股脑儿地发给客户端。</p>
                            <p class="code-block"><code>Content-Length: 19847</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Content-Encoding</h4>
                            <p class="mb-2">WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。</p>
                            <p class="code-block"><code>Content-Encoding：gzip</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">Content-Language</h4>
                            <p class="mb-2">作用：WEB服务器告诉浏览器自己响应的对象的语言者</p>
                            <p class="code-block"><code>Content-Language:da</code></p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Miscellaneous 头域</h3>
                            
                            <h4 class="font-medium mb-2">Server:</h4>
                            <p class="mb-2">作用：指明HTTP服务器的软件信息</p>
                            <p class="code-block"><code>Server: Microsoft-IIS/7.5</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">X-AspNet-Version:</h4>
                            <p class="mb-2">作用：如果网站是用ASP.NET开发的，这个header用来表示ASP.NET的版本</p>
                            <p class="code-block"><code>X-AspNet-Version: 4.0.30319</code></p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium mb-2">X-Powered-By:</h4>
                            <p class="mb-2">作用：表示网站是用什么技术开发的</p>
                            <p class="code-block"><code>X-Powered-By: ASP.NET</code></p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Transport头域</h3>
                            
                            <h4 class="font-medium mb-2">Connection</h4>
                            <p class="mb-2">例如：<code>Connection: keep-alive</code>当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接</p>
                            <p>例如：<code>Connection: close</code>代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭，当客户端再次发送Request，需要重新建立TCP连接。</p>
                        </div>
                        
                        <div>
                            <h3 class="text-xl font-semibold mt-6 mb-3 text-indigo-600">Location头域</h3>
                            
                            <h4 class="font-medium mb-2">Location</h4>
                            <p>作用：用于重定向一个新的位置,包含新的URL地址</p>
                            <p class="text-sm text-gray-600">实例请看304状态实例</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Keep Alive -->
            <section id="keep-alive" class="mb-16">
                <h2 class="text-3xl font-bold mb-6 text-indigo-700 border-b pb-2">
                    <a href="#keep-alive" class="header-anchor"><i class="fas fa-link"></i></a>
                    HTTP协议是无状态的和Connection: keep-alive的区别
                </h2>
                <div class="bg-white rounded-xl shadow-md p-6 mb-6 card">
                    <p class="mb-4">无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。从另一方面讲，打开一个服务器上的网页和你之前打开这个服务器上的网页之间没有任何联系。</p>
                    <p class="mb-4">HTTP是一个<span class="text-red-600 font-medium">无状态</span>的<span class="text-red-600 font-medium">面向连接</span>的协议，无状态不代表HTTP不能保持TCP连接，更不能代表HTTP使用的是UDP协议（无连接）。</p>
                    <p class="mb-4">从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。</p>
                    <p>Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。</p>
                </div>
            </section>
        </article>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="container mx-auto max-w-5xl px-4 md:px-0 text-center">
            <h2 class="text-xl font-bold mb-4">技术小馆</h2>
            <a href="http://www.yuque.com/jtostring" class="text-indigo-300 hover:text-white transition duration-200">
                <i class="fas fa-external-link-alt mr-1"></i> http://www.yuque.com/jtostring
            </a>
            <p class="mt-4 text-gray-400 text-sm">© 2023 技术小馆. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```